import { computed, reactive, readonly, ref, watch } from 'vue'
import { useEventListener, useLocalStorage, useNetwork, useWindowSize } from '@vueuse/core'
import { defineStore, storeToRefs } from 'pinia'
import { useFollowStore } from '@/store/home/follow'
import { useNavStore } from '@/store/nav'
import { getCurrentDate } from '@/utils/string-helper'
import { setMuted } from '@/utils/video-store'
import { useUserAgent } from '@/compositions/utils/ua'
import { LOCAL_STORAGE_KEYS } from '@/constant'
import { DESKTOP_BOUNDARY_WIDTH, DESKTOP_FONT_SIZE_SCALE } from '@/constant/config'
import { TAB_TYPE } from '@/constant/home'
import API from '@/http'
import { useInstallTutorStore } from './install-tutor'

const DESKTOP = 'desktop'
const MOBILE = 'mobile'

const MOBILE_CHECK = () => {
  let check = false
  ;(function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a,
      ) ||
      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
        a.substr(0, 4),
      )
    )
      check = true
  })(navigator.userAgent || navigator.vendor || window.opera)
  return check
}

export const useAppStore = defineStore('app', () => {
  const navStore = useNavStore()
  const { homeTab, atHome } = storeToRefs(navStore)
  const { show, hide } = navStore

  const followStore = useFollowStore()
  const { noFollowAnyone } = storeToRefs(followStore)

  // video fullscreen
  const videoFullscreen = ref(false)
  function toggleVideoFullscreen(v) {
    if (typeof v === 'boolean') {
      videoFullscreen.value = v
    } else {
      videoFullscreen.value = !videoFullscreen.value
    }
    if (videoFullscreen.value) {
      hide()
    } else {
      show()
    }
  }

  // RWD 設定
  const device = ref(null)
  const isDesktop = computed(() => device.value === DESKTOP)
  const isMobile = computed(() => device.value === MOBILE)
  const checkDevice = () => {
    const width = window.innerWidth
    if (!MOBILE_CHECK() && width > DESKTOP_BOUNDARY_WIDTH) {
      device.value = DESKTOP
      document.documentElement.style.fontSize = `${16 * DESKTOP_FONT_SIZE_SCALE}px`
    } else {
      device.value = MOBILE
      document.documentElement.style.fontSize = ''
    }
  }
  useEventListener('resize', checkDevice)
  checkDevice()

  const { width: windowWidth, height: windowHeight } = useWindowSize()

  // 裝置畫面轉向
  const orientation = ref('portrait-primary')
  const isLandscape = computed(
    () => orientation.value === 'landscape-primary' || orientation.value === 'landscape-secondary',
  )
  const isPortrait = computed(
    () => orientation.value === 'portrait-primary' || orientation.value === 'portrait-secondary',
  )
  watch(isLandscape, (v) => isMobile.value && v && hide(), { immediate: true })
  watch(isPortrait, (v) => isMobile.value && !videoFullscreen.value && v && show(), { immediate: true })
  const setOrientation = () => {
    switch (window.orientation) {
      case 0:
        orientation.value = 'portrait-primary'
        break
      case 90:
        orientation.value = 'landscape-primary'
        break
      case -90:
        orientation.value = 'landscape-secondary'
        break
      case 180:
        orientation.value = 'portrait-secondary'
        break
      default:
        if (window.innerWidth <= window.innerHeight) {
          orientation.value = 'portrait-primary'
        } else {
          orientation.value = 'landscape-primary'
        }
    }
  }
  useEventListener('orientationchange', setOrientation)
  setOrientation()

  // 網路連線
  const { isOnline } = useNetwork()

  // 友站連結表
  const friendLinks = ref([])
  API.App.friendLinks({ pos: 'menu' }).then((d) => (friendLinks.value = d))

  // 所有 viewer 中的 video 播放/靜音 switch
  let replayTimer
  const videoPlay = ref(true)
  const videoMuted = ref(true)
  function toggleVideoPlay(v) {
    if (typeof v === 'boolean') {
      videoPlay.value = v
    } else {
      videoPlay.value = !videoPlay.value
    }
  }
  function replay() {
    clearTimeout(replayTimer)
    videoPlay.value = false
    replayTimer = setTimeout(() => (videoPlay.value = true))
  }
  function toggleVideoMuted() {
    videoMuted.value = !videoMuted.value
    setMuted(videoMuted.value)
  }

  // 桌面版 viewer 展開 switch
  const viewerExpand = ref(true)
  function toggleViewerExpand(v) {
    if (typeof v === 'boolean') {
      viewerExpand.value = v
    } else {
      viewerExpand.value = !viewerExpand.value
    }
  }
  function isForceClose() {
    return (
      (isDesktop.value && atHome.value && homeTab.value === TAB_TYPE.FOLLOW && noFollowAnyone.value) ||
      videoFullscreen.value
    )
  }
  watch([isDesktop, atHome, homeTab, noFollowAnyone, videoFullscreen], () => (viewerExpand.value = !isForceClose()))

  // 後端提供的全域參數
  const appConfig = reactive({})

  async function initAppConfig() {
    const data = await API.App.init()
    for (const [k, v] of Object.entries(data)) {
      appConfig[k] = v
    }
  }

  const allPayments = ref([])
  async function syncAllPaymentConfig() {
    const response = await API.Payment.getAllPayment()
    allPayments.value = response.map((item) => ({
      ...item,
      pay_type_ids: item.pay_type_ids.split(',').map(Number),
    }))
  }

  // pwa 顯示安裝提示
  const isPwaApp = ref(window.matchMedia('(display-mode: standalone)').matches)
  const installerBolt = ref(0)
  const installerTipDate = useLocalStorage(LOCAL_STORAGE_KEYS.INSTALLER_TIP_DATE)
  const showInstaller = computed(() => installerBolt.value === 3 && _showTopCondition())

  function _showTopCondition() {
    return installerTipDate.value !== getCurrentDate() && isMobile.value && !isPwaApp.value
  }

  function releaseInstaller() {
    if (isPwaApp.value) return
    installerBolt.value += 1
  }
  function openInstaller() {
    if (isPwaApp.value) return
    installerBolt.value = 3
    installerTipDate.value = undefined
  }
  function closeInstaller() {
    installerBolt.value = 0
    installerTipDate.value = getCurrentDate()
  }
  if (new URL(window.location.href).searchParams?.get('installer')) {
    openInstaller()
  }

  const { open: openInstallTutor } = useInstallTutorStore()
  const { os, isIOS, isSafari } = useUserAgent()
  const IOS_UNREACHABLE_VERSION = 16.4

  const installTutorCounter = ref(0)
  watch(installTutorCounter, (v) => {
    if (v === 3) {
      if (_showTopCondition()) {
        openInstallTutor({ onClose: () => (installerTipDate.value = getCurrentDate()) })
      }
      installTutorCounter.value = 0
    }
  })

  function tickInstallTutorCounter() {
    installTutorCounter.value += 1
  }

  if (new URL(window.location.href).searchParams?.get('install-tutor')) {
    if (isIOS.value && !isSafari.value && os.value?.version && Number(os.value?.version) < IOS_UNREACHABLE_VERSION) {
      openInstaller()
    } else {
      openInstallTutor()
    }
  }

  /**
   * 確認 App.vue 是否已掛載，
   * 用於確保 mounted 後才執行某些操作，
   * 像是VueRouter的跳轉行為會有所不同
   */
  const isMounted = ref(false)
  const mountApp = () => (isMounted.value = true)

  return {
    device: readonly(device),
    windowWidth: readonly(windowWidth),
    windowHeight: readonly(windowHeight),
    isDesktop,
    isMobile,

    isLandscape,
    isPortrait,

    isOnline,

    friendLinks: readonly(friendLinks),

    videoPlay: readonly(videoPlay),
    videoMuted: readonly(videoMuted),
    toggleVideoPlay,
    replay,
    toggleVideoMuted,

    videoFullscreen: readonly(videoFullscreen),
    toggleVideoFullscreen,

    viewerExpand: readonly(viewerExpand),
    toggleViewerExpand,

    appConfig: readonly(appConfig),
    initAppConfig,

    allPayments: readonly(allPayments),
    syncAllPaymentConfig,

    isPwaApp,
    showInstaller,
    releaseInstaller,
    openInstaller,
    closeInstaller,

    tickInstallTutorCounter,

    isMounted,
    mountApp,
  }
})
